<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OpenLayers WMTS Test</title>
    <!-- 4.6.5 -->
    <link rel="stylesheet" type="text/css" href="../../lib/openLayers/4.6.5/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/4.6.5/ol.js"></script>
    <style>
        .map {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<script>
    // Define the resolutions and matrixIds for the tile grid
    const resolutions = [
        0.3515625, 0.17578125, 0.087890625, 0.0439453125,
        0.02197265625, 0.010986328125, 0.0054931640625,
        0.00274658203125, 0.001373291015625, 0.0006866455078125,
        0.00034332275390625, 0.000171661376953125, 0.0000858306884765625,
        0.00004291534423828125, 0.000021457672119140625,
        0.000010728836059570312, 0.000005364418029785156,
        0.000002682209014892578, 0.000001341104507446289
    ];

    const matrixIds = [];
    for (let i = 0; i < resolutions.length; i++) {
        matrixIds.push(i.toString());
    }

    // Create the image base layer
    const imageLayer = new ol.layer.Tile({
        source: new ol.source.WMTS({
            url: 'http://10.140.90.136:8081/gw/geowebcache/service/wmts',
            layer: '影像底图_L7_18级202210_最终版',
            matrixSet: 'EPSG:4490_影像底图_L7_18级202210_最终版',
            format: 'image/png',
            projection: 'EPSG:4490',
            tileGrid: new ol.tilegrid.WMTS({
                origin: [-180.0, 90.0],
                resolutions: resolutions,
                matrixIds: matrixIds
            }),
            style: ''
        })
    });

    // Create the annotation layer
    const annotationLayer = new ol.layer.Tile({
        source: new ol.source.WMTS({
            url: 'http://10.140.90.136:8081/gw/geowebcache/service/wmts',
            layer: '影像注记_L7_18级202210_最终版',
            matrixSet: 'EPSG:4490_影像注记_L7_18级202210_最终版',
            format: 'image/png',
            projection: 'EPSG:4490',
            tileGrid: new ol.tilegrid.WMTS({
                origin: [-180.0, 90.0],
                resolutions: resolutions,
                matrixIds: matrixIds
            }),
            style: ''
        })
    });

    const map = new ol.Map({
        // 容器
        target: 'map',
        // 图层集合(数组可以放置多个)
        layers: [
            // 创建第一个图层，也是地图底图
            imageLayer, annotationLayer
        ],
        // 同时加载的最大瓦片数(默认为16)
        maxTilesLoading: 16,
        // 视图
        view: new ol.View({
            /*constrainRotation: 90,
            enableRotation: true,*/
            // 限制视图的范围，换句话说，超出此范围的任何内容都无法在地图上看到
            // extent:[120,30,140,50],
            // 坐标系（默认：EPSG:3857）
            projection: 'EPSG:4326',
            // 初始位置(经纬度转墨卡托)
            // center: this.wgs84ToMercator(this.defaultLocation),
            center: [112.46261468487126, 34.66450747066452],
            // 初始大小
            zoom: 7,
            //最小缩放级别
            minZoom: 1,
            //最大缩放级别
            maxZoom: 15,
        }),
    })
</script>
</body>
</html>
